<template>
<div>
    <el-row>
        <el-col :span="24">
            <el-table
            v-loading="isLoading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)"
            :data="myArticleList"
            style="width: 100%"
            >
        <!-- <el-table-column
            prop="articleId"
            label="文章ID"
            class-name="col-font-size"
            width="300">
        </el-table-column> -->
        <el-table-column
            label="标题"
            class-name="col-font-size"
            width="400">
            <template slot-scope="scope">
                <span class="my-article-table-title" @click="titleClick(scope.$index,scope.row,myArticleList)">{{scope.row.title}}</span>
            </template>
        </el-table-column>
        <el-table-column
            prop="goodCount"
            label="点赞数"
            class-name="col-font-size">
        </el-table-column>
        <el-table-column
            prop="commentCount"
            label="评论量"
            class-name="col-font-size">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            width="180"
            sortable
            column-key="createTime"
            class-name="col-font-size">
        </el-table-column>
        <el-table-column
            prop="status"
            label="当前状态"
            :filters="[{ text: '未发布', value: 'notPublished' }, { text: '已发布', value: 'published' }]"
            :filter-method="filterStatus"
            filter-placement="bottom-end"
            class-name="col-font-size"
            width="180"
            >
            <template slot-scope="scope">
                <el-tag
                :type="scope.row.status === 'notPublished' ? 'warning' : 'success'"
                disable-transitions>{{scope.row.status === 'notPublished' ? '未发布' : '已发布'}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
            label="操作"
            fixed="right"
            width="200">
            <template slot-scope="scope">
                <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                circle
                @click="handleEdit(scope.$index, scope.row,myArticleList)"></el-button>
                <el-button
                size="mini"
                type="success"
                icon="el-icon-position"
                :disabled="scope.row.status==='published'"
                circle
                title="发布"
                @click="handlePublish(scope.$index, scope.row,myArticleList)"></el-button>
                <el-button
                size="mini"
                type="warning"
                icon="el-icon-warning-outline"
                :disabled="!(scope.row.status==='published')"
                circle
                title="撤销发布"
                @click="handleCancelPublish(scope.$index, scope.row,myArticleList)"></el-button>
                <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                circle
                @click="handleDelete(scope.$index, scope.row,myArticleList)"></el-button>
            </template>
        </el-table-column>
    </el-table>
        </el-col>
    </el-row>
</div>
</template>

<script>
import {request} from '@/network/request.js';
export default {
    name:"myArticleList",
    props:{
        myArticleList:{
            type: Array,
            default:()=>[]
        },
        isLoading:{
            type:Boolean,
            default:()=>false
        }
    },
    data(){
        return {
        }
    },
    methods:{
        filterStatus(value, row){
            return row.status===value;
        },
        titleClick(index,row,myArticleList){
            this.$router.push({
                name:"ArticleDetail",
                query:{
                    articleId:myArticleList[index].articleId,
                    authorId:this.$store.getters.getCurrentUser.userId
                }
            })
        },
        handleEdit(index, row,myArticleList) {
            console.log(index, row);
            //进入修改文章的页面
            this.$router.push({
                name:"EditMyArticle",
                query:{
                    articleId:myArticleList[index].articleId
                }
            })
        },
        handleDelete(index, row,myArticleList) {
            this.$confirm('该操作会永久删除这篇文章, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: '操作中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                        });
                    //进行删除操作
                    request({
                    url:"/article/deleteMyArticle",
                    method:"post",
                    data:{
                        articleId:myArticleList[index].articleId
                    }
                }).then(res=>{
                    console.log(res);
                    loading.close();
                    if(res.data.status==="ok"){
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                    });
                    myArticleList.splice(index, 1);
                    }else{
                        this.$message.error('服务器出错，请稍后再试');
                    }
                }).catch(err=>{
                    console.log(err);
                    loading.close();
                    this.$message.error('服务器出错，请稍后再试');
                })
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            
        },
        handlePublish(index,row,myArticleList){
            //进行文章发布操作
            const loading = this.$loading({
                        lock: true,
                        text: '操作中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                        });
            request({
                url:"/article/publishArticle",
                method:"post",
                data:{
                    articleId:myArticleList[index].articleId
                }
            }).then(res=>{
                loading.close();
                if(res.data.status==="ok"){
                    console.log(res);
                    this.$message({
                    message: '发布成功> <',
                    type: 'success'
                    });
                row.status="published";
                }else{
                    this.$message.error('服务器太忙了请稍后再试');
                }
            }).catch(err=>{
                console.log(err);
                loading.close();
                this.$message.error('服务器太忙了请稍后再试');
            })
        },
        handleCancelPublish(index,row,myArticleList){
            //进行文章撤销发布操作
            const loading = this.$loading({
                        lock: true,
                        text: '操作中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                        });
            request({
                url:"/article/cancelPublished",
                method:"post",
                data:{
                    articleId:myArticleList[index].articleId
                }
            }).then(res=>{
                loading.close();
                if(res.data.status==="ok"){
                    console.log(res);
                    this.$message({
                    message: '撤消发布成功> <',
                    type: 'success'
                    });
                row.status="notPublished";
                }else{
                    this.$message.error('服务器太忙了请稍后再试');
                }
            }).catch(err=>{
                loading.close();
                console.log(err);
                this.$message.error('服务器太忙了请稍后再试');
            })
        }
    }
}
</script>

<style>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
.col-font-size {
    font-size: 18px;
}
.my-article-table-title {
    transition: all 0.3s;
    cursor: pointer;
}
.my-article-table-title:hover {
    color: #FF69B4;
}
</style>